

<script>
  import "@/assets/common/base.css"
  import leftBar from '@/components/leftBar';
  import topHeader from '@/components/topHeader';
  import addChannel from '@/components/addChannel';
  import { basicDataTest,settlementListData} from "@/common/data.js";
  const { Fetch } = require("@/common/fetch");
  const basicData = Fetch('/admin/finance/api/page.php?action=get_base');
  const settlementData = Fetch('/admin/finance/api/settlement_config.php?action=get_config');
  const _dev_ = false;
    export default {
      name: "Settlement",
      components:{leftBar,topHeader,addChannel},
      data(){
        return{
          left_menu:_dev_ ? basicDataTest.left_menu : [],    //左侧导航数据
          topHeader:_dev_ ? basicDataTest.user : {},          //用户信息
          listData:_dev_? settlementListData:[],             //接口请求数据
          // listData:[],                                        //保存数据
          defaultForm:{
            "id": "",
            "name": "",
            "code": "",
            "commission_mode": "",
            "rate": '',
            "is_show": "t",
            "pay_type": '',
            "settlement_mode": '',
            "is_del":0
          }
        }
      },
      methods:{
        changeChannel(item){
          this.$refs['addChannel'].openDialog(item);
        },
        upload(data){
          let item = this.parseParam(data);
            // 非大众点评
            if( data.id){
              //编辑
              let ind = this.listData.findIndex((ele)=>{return ele.id == data.id});
              this.listData.splice(ind,1,item);
            }else{
              this.listData.push(item);
            }
            this.save(data);
        },
        save(data){
          const saveData = {...{},...data};
          delete saveData.settlement_mode_txt;
          delete saveData.commission_mode_txt;
          Fetch('/admin/finance/api/settlement_config.php?action=save_config',{
            type:'post',
            isForm:false,
            data:saveData
          }).then((res)=>{
            this.$message(res.message);
          })
        },
        parseParam(i){
          switch(i.commission_mode){
            case 'none':
              i.commission_mode_txt = '无';
              break;
            case 'unified':
              i.commission_mode_txt = '统一';
              break;
            case 'ladder':
              i.commission_mode_txt = '阶梯';
              break;
          }
          switch(i.settlement_mode){
            case 'day':
              i.settlement_mode_txt = '日结';
              break;
            case 'week':
              i.settlement_mode_txt = '周结';
              break;
            case 'month':
              i.settlement_mode_txt = '月结';
              break;
          }
          i.is_del=0;
          return i;
        }
      },
      mounted(){
        basicData.then((response)=>{
          const {left_menu,user}  = response.data;
          this.left_menu = left_menu;
          this.topHeader= user;
        });
        settlementData.then((response)=>{
            const {data} = response,
                  self =this;

            for(let item in data){
              data[item].forEach((i,k)=>{
                // i = {...{},...this.defaultForm,...i};
                i.pay_type = i.pay_type || '';
                i.rate = i.rate || 0;
                i.settlement_mode = i.settlement_mode || '';
                i = self.parseParam(i);
                self.listData.push(i);
              })
            }
            // console.log(this.listData)
            // this.listData = data;
        })
      }

    }
</script>
<template>
  <div id="traiding">
    <el-container>
      <el-aside width="170px">
        <leftBar :parcel="left_menu"/>
      </el-aside>
      <el-container>
        <el-header height="80px">
          <topHeader :parcel="topHeader"/>
        </el-header>
        <h2 class="m-title">结算配置</h2>
        <el-main class="m-container">
          <div class="m-list">
            <div class="list-item"  v-for="(list,ind) in listData" :key="ind">
              <h3 class="title">{{list.name}}</h3>
              <span class="btn"  @click="changeChannel(list)">编辑</span>
              <ul>
                <li class="item"  v-if="list.code === 'dianping'">
                  <span class="tit">业务模式：</span>
                  <span class="txt">{{list.pay_type}}</span>
                </li>
                <li class="item" >
                  <span :class="[list.commission_mode == 'ladder'?'m-absolute':'','tit']">收佣费率：</span>
                  <span :class="[list.commission_mode == 'ladder'?'pl74':'','txt']">{{list.commission_mode_txt}}</span>
                  <span class="txt" v-if="list.commission_mode == 'unified'">{{list.rate || ''}}%</span>
                  <div v-if="list.commission_mode == 'ladder'" class="pl74" >
                    <div v-for="(ele,ind) in (list.rate || [])" :key="ind">
                      <span class="txt">{{ele.ge}}</span>≤ X ≤<span class="txt">{{ele.lt}}</span>
                      <span class="txt">{{ele.rate}}</span>
                    </div>
                  </div>
                </li>
                <li class="item">
                  <span class="tit">结算账期：</span>
                  <span class="txt">{{list.settlement_mode_txt}}</span>
                </li>
              </ul>
            </div>

          </div>


          <div class="m-button">
            <div class="m-btn" @click="changeChannel()">添加渠道</div>
          </div>
        </el-main>
      </el-container>
      <addChannel ref="addChannel" @upload="upload"></addChannel>
    </el-container>
  </div>
</template>
<style scoped lang="scss">
  #settlement {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #F2F2F2;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
  }
  .pl74{
    padding-left:74px;
  }
  .mb10{
    margin-bottom:10px;
  }
  .m-absolute{
    position: absolute;
  }
  .el-main{padding:30px}
  .el-header{padding:0;}
  .m-title{
    font-family: PingFangSC-Medium;
    font-size: 20px;
    color: #000000;
    letter-spacing: 0;
    /*margin-bottom:30px;*/
    padding:30px;
  }
  .m-container{
    padding:0 25px;
    background: #FFFFFF;
    box-shadow: 0 1px 8px 0 rgba(0,0,0,0.15);
    margin:0 30px;
    .m-list{
      .list-item{
        padding-top:20px;
        ul{
          margin-top: 10px;
        }
      }
      .title{
        display: inline-block;
        border-left:5px solid #FFED8C;
        padding:0 8px;
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #000000;
        letter-spacing: 0;
        display: inline-block;
        height: 20px;
        line-height: 20px;
      }
      .btn{
        border: 1px solid #FF679E;
        border-radius: 3px;
        text-align: center;
        width:50px;
        height:23px;
        line-height: 25px;
        color:#FF679E;
        display: inline-block;
        margin-left: 5px;
      }
      .item{
        padding:10px 10px;
        position: relative;
        .tit{
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #666666;
          letter-spacing: 0;
        }
        .txt{font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #000000;
          letter-spacing: 0;
          padding-right:10px;
        }
      }
    }
    .m-button{
      text-align: center;
      .m-btn{
        display: inline-block;
        padding:5px 30px;
        background: #FF679E;
        border-radius: 101px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #FFFFFF;
        letter-spacing: 0;
        line-height: 28px;
        margin:30px 10px;
      }
    }
  }
</style>
